<template>
  <div class="settings">
    <h2>{{ $t('settings.title') }}</h2>
    
    <a-tabs v-model:activeKey="activeTab">
      <a-tab-pane key="general" :tab="$t('settings.tabs.general')">
        <a-form layout="vertical" @finish="saveGeneralSettings">
          <a-form-item :label="$t('settings.fields.systemName')">
            <a-input v-model:value="generalSettings.systemName" />
          </a-form-item>
          
          <a-form-item :label="$t('settings.fields.maxConcurrentTasks')">
            <a-input-number 
              v-model:value="generalSettings.maxConcurrentTasks"
              :min="1"
              :max="50"
              style="width: 200px"
            />
          </a-form-item>
          
          <a-form-item :label="$t('settings.fields.logRetentionDays')">
            <a-input-number 
              v-model:value="generalSettings.logRetentionDays"
              :min="1"
              :max="365"
              style="width: 200px"
            />
          </a-form-item>
          
          <a-form-item>
            <a-button type="primary" html-type="submit">{{ $t('common.save') }}</a-button>
          </a-form-item>
        </a-form>
      </a-tab-pane>
      
      <a-tab-pane key="notifications" :tab="$t('settings.tabs.notifications')">
        <a-form layout="vertical">
          <a-form-item :label="$t('settings.fields.enableFailureNotification')">
            <a-switch v-model:checked="notificationSettings.enableFailureNotification" />
          </a-form-item>
          
          <a-form-item :label="$t('settings.fields.emailAddress')" v-if="notificationSettings.enableFailureNotification">
            <a-input v-model:value="notificationSettings.emailAddress" :placeholder="$t('settings.fields.emailPlaceholder')" />
          </a-form-item>
          
          <a-form-item>
            <a-button type="primary" @click="saveNotificationSettings">{{ $t('common.save') }}</a-button>
          </a-form-item>
        </a-form>
      </a-tab-pane>
      
      <a-tab-pane key="about" :tab="$t('settings.tabs.about')">
        <a-descriptions :title="$t('settings.systemInfo.title')" :column="1">
          <a-descriptions-item :label="$t('settings.systemInfo.version')">{{ systemInfo.version }}</a-descriptions-item>
          <a-descriptions-item :label="$t('settings.systemInfo.uptime')">{{ systemInfo.uptime }}</a-descriptions-item>
          <a-descriptions-item :label="$t('settings.systemInfo.activeTasks')">{{ systemInfo.activeTasks }}</a-descriptions-item>
          <a-descriptions-item :label="$t('settings.systemInfo.totalTasks')">{{ systemInfo.totalTasks }}</a-descriptions-item>
        </a-descriptions>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { useI18n } from 'vue-i18n'
import { message } from 'ant-design-vue'

const { t } = useI18n()
const activeTab = ref('general')

const generalSettings = reactive({
  systemName: 'Skedule',
  maxConcurrentTasks: 5,
  logRetentionDays: 30
})

const notificationSettings = reactive({
  enableFailureNotification: false,
  emailAddress: ''
})

const systemInfo = reactive({
  version: '1.0.0',
  uptime: '0天 0小时 0分钟',
  activeTasks: 0,
  totalTasks: 0
})

const saveGeneralSettings = async () => {
  try {
    // TODO: 调用API保存设置
    message.success(t('settings.saveSuccess'))
  } catch (error) {
    message.error(t('settings.saveFailed'))
  }
}

const saveNotificationSettings = async () => {
  try {
    // TODO: 调用API保存通知设置
    message.success(t('settings.saveSuccessNotification'))
  } catch (error) {
    message.error(t('settings.saveNotificationFailed'))
  }
}

const loadSettings = async () => {
  try {
    // TODO: 从API加载设置
    // 模拟数据
    Object.assign(systemInfo, {
      version: '1.0.0',
      uptime: '2天 15小时 32分钟',
      activeTasks: 2,
      totalTasks: 5
    })
  } catch (error) {
    message.error(t('settings.loadFailed'))
  }
}

onMounted(() => {
  loadSettings()
})
</script>

<style lang="less" scoped>
.settings {
  max-width: 800px;
}

.settings h2 {
  margin-bottom: 24px;
  font-size: 24px;
  font-weight: 600;
}
</style> 